/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$border-color: #ccc;
$header-background: #e7eef0;
$body-background: #f4f8f9;

$table-header-background: #efefef;

$btn-group-border-color: #ccc;
$btn-color: #647984;
$btn-hover-color: #1c435c;

$progress-bar-waiting: #c1c1c1;
$progress-bar-preparing: #85c9d1;
$progress-bar-building: #2cb1c1;
$progress-bar-uploading-artifacts: #217a85;
$progress-bar-unknown: #fff;

$tooltip-background: #f3f3f3;
$tooltip-border-color: #ccc;

$tooltip-message-background: #333;

$black: #0a0a0a;
$white: #fff;
$gray: #808080;
$dark-gray: #2f4f4f;
$passed: #00c853;
$failed: #fa2d2d;
$building: #ffc11b;

.stage-overview-container {
  position:      absolute;
  z-index:       map_get($zindex, stage-overview);
  border:        1px solid $border-color;
  border-radius: 3px;
  font-size:     12px;
  width:         813px;
  min-height:    200px;
  margin:        29px 0 0 5px;
  background:    $body-background;
  box-shadow:    3px 3px $header-background;

  &:before {
    content:       '';
    display:       block;
    width:         0;
    height:        0;
    position:      absolute;

    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;

    left:          12px;
    top:           -13px;
    transform:     rotate(90deg);
  }
}

.pipeline-activity-align-left {
  &:before {
    left: 685px;
  }
}

.pipeline-activity-align-right {
  &:before {
    left: 34.5px;
  }
}

.vsm-class {
  color: $black;

  .stage-name {
    margin-top: 8px;
  }

  .cancel-or-rerun-stage-icon, .job-rerun-container {
    display: none;
  }

  .job-count-container {
    margin-left: 495px;
  }

  .checkbox-cell {
    display: none;
  }

  .table-header {
    .name-cell {
      padding-left: 15px
    }
  }

  .name-cell {
    margin-left: 15px;
  }

  .stage-name-container {
    i {
      margin: 12px 10px 0 10px;
    }
  }
}

.pipeline-activity-class {
  color: $black;

  .stage-name-container {
    i {
      font-size:   17px;
      margin:      17px 10px 0 10px;
      font-weight: 400;

      &:before {
        margin: 0;
      }
    }
  }

  i {
    display: block;

    &:hover {
      display: block;
    }

    &:before {
      margin: 0;
    }
  }

  .triggered-by-container {
    display: flex;
  }

  .triggered-by-and-on {
    width:  auto;
    margin: 0 5px 0 5px;
  }

  .duration-separator {
    width: auto;
  }

  .job-name {
    height: auto;
  }

  .stage-operation-button-group div {
    margin: 2px;
  }

  .tooltip-message {
    margin-top:  12px;
    margin-left: -78px;
  }

  .rerun-wrapper {
    left: 34px;
  }

  .stage-counter-dropdown-wrapper {
    select {
      padding-right: 0;
    }

    i {
      margin-top: 6px;
    }
  }
}

.stage-overview-container.building-stage, .stage-overview-container.cancelled-stage {
  &:before {
    border-right: 10px solid $building;
  }
}

.stage-overview-container.passed-stage {
  &:before {
    border-right: 10px solid $passed;
  }
}

.stage-overview-container.failed-stage, .stage-overview-container.failing-stage {
  &:before {
    border-right: 10px solid $failed;
  }
}

.stage-overview-status {
  width:  100%;
  height: 4px;
}

.stage-overview-status.building-stage {
  background: transparent url('../../../../app/assets/images/building.gif') repeat-x;
}

.stage-overview-status.failing-stage {
  background: transparent url('../../../../app/assets/images/failing.gif') repeat-x;
}

.stage-overview-status.passed-stage {
  background: $passed;

  &:before {
    display: none;
  }
}

.stage-overview-status.failed-stage {
  background: $failed;

  &:before {
    display: none;
  }
}

.stage-overview-status.cancelled-stage {
  background: $building;

  &:before {
    display: none;
  }
}

.stage-overview-container.align-left {
  &:before {
    left: 575px;
  }
}

.stage-header-container {
  padding:       16px;
  border-bottom: 1px solid $border-color;
  background:    $header-background;
}

.stage-operation-button-group {
  display:       flex;
  font-size:     15px;
  border:        1px solid $btn-group-border-color;
  border-radius: 5px;
  height:        29px;
  margin-top:    4px;

  i:hover {
    background: transparent;
  }
}

.stage-operation-button-group > div:first-child {
  border-right: 1px solid $btn-group-border-color;
}

.stage-operation-button-group div {
  color:   $btn-color;
  padding: 1px 7px 1px 7px;

  &:hover {
    color: $btn-hover-color;
  }

}

.stage-settings {
  i:hover {
    background: transparent;
  }

  &:hover:enabled {
    animation-name:            rotate;
    animation-duration:        2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

.flex-box {
  display:         flex;
  justify-content: space-between;
}

.stage-name-container {
  display: flex;

  i {
    font-size:   17px;
    margin:      17px 10px 0 10px;
    font-weight: 400;
    color:       $gray;
  }
}

.stage-name-title {
  font-size:     10px;
  margin-bottom: -2px;
}

.stage-name {
  margin-top:  3px;
  font-size:   17px;
  font-weight: 600;
  max-width:   200px;
  word-break:  break-all;
}

.stage-counter-dropdown-wrapper {
  display: flex;

  select {
    width:         55px !important; //sass-lint:disable-line no-important
    padding-right: 25px;
    height:        30px;
    line-height:   30px;
    margin-top:    3px;
    margin-bottom: -30px;
  }

  i {
    margin-top:  5px;
    margin-left: 3px;
    height:      24px;
  }
}

.stage-trigger-and-timing-container {
  margin-top: 20px;
}

.stage-details-page-link {
  text-align:  right;
  padding-top: 23px;
}


// job list

.job-result {
  width:         18px;
  height:        18px;
  margin-right:  10px;
  margin-top:    6px;
  margin-left:   5px;
  font-size:     11px;
  border-radius: 2px;
}

.passed {
  @include icon-before($type: $fa-var-check, $color: $white);
  background: $passed;

  &:before {
    position: relative;
    top:      -4px;
    left:     -1.5px;
  }
}

.failed {
  @include icon-before($type: $fa-var-exclamation-circle, $color: $white);
  background: $failed;

  &:before {
    position: relative;
    top:      -4px;
    left:     -0.7px;
  }
}

.cancelled {
  @include icon-before($type: $fa-var-ban);
  background: $building;

  &:before {
    position: relative;
    top:      -4px;
    left:     -0.7px;
  }
}

.unknown {
  min-width:  18px;
  background: transparent url('../../../../app/assets/images/building.gif') repeat-x;
}

.rerun-wrapper {
  transform:   rotate(150deg);
  font-weight: 900;
  font-size:   14px;
  position:    relative;
  left:        38px;
  top:         29px;
  width:       0;
  height:      0;
  color:       $dark-gray;

  i {
    cursor: auto;
  }
}

.job-list-container {
  font-size:  13px;
  margin-top: 10px;

  .table-row:last-child {
    margin-bottom: 10px;
    border-radius: 0 0 5px 5px;
  }
}

.table-header, .table-row {
  display:    flex;
  width:      780px;
  margin:     0 15px 0 15px;
  border:     1px solid $border-color;
  border-top: unset;
  background: $white;

  .checkbox-cell {
    width: 25px;
  }

  .name-cell {
    width:         145px;
    display:       flex;
    overflow:      hidden;
    text-overflow: ellipsis;
  }

  .console-log-icon-cell {
    width: 15px;
  }

  .state-cell {
    width:      165px;
    font-style: italic;
  }

  .status-cell {
    width: 250px;
  }

  .duration-cell {
    width: 105px;
  }

  .agent-cell {
    width:         110px;
    margin-right:  10px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }
}

.table-header {
  height:        32px;
  line-height:   30px;
  border-top:    1px solid $border-color;
  font-style:    italic;
  background:    $table-header-background;
  border-radius: 5px 5px 0 0;

  .name-cell {
    padding-left: 30px;
  }
}

.table-body {
  max-height: 243px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.cancelled-by-wrapper {
  margin-bottom: 12px;
}

.triggered-by-container {
  line-height: 20px;
}

.triggered-by-and-on {
  font-weight: 600;
  font-style:  italic;
}

.duration-separator {
  margin: 0 7px 0 7px;
}

.dummy-container-above-stage-details-link {
  height: 53px;
}

.table-row {
  height:      44px;
  line-height: 26px;
}

.table-header > div {
  font-size:   13px;
  font-weight: 600;
  text-align:  center;
}

.table-row > div {
  font-size:  13px;
  text-align: center;
  margin:     7px 0 5px 8px;
}

.checkbox-cell input[type="checkbox"] { //sass-lint:disable-line no-qualifying-elements
  height:     13px;
  margin-top: -2px;
}

.job-name {
  font-weight:   600;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}


.progress-bar-container {
  height:        11px;
  display:       flex;
  border:        0.5px solid $border-color;
  border-radius: 3px;
  overflow:      hidden;
  margin-top:    9px;

  .waiting, .scheduled {
    background: $progress-bar-waiting;
  }

  .preparing {
    background: $progress-bar-preparing;
  }

  .building {
    background: $progress-bar-building;
  }

  .uploading-artifacts, .completing {
    background: $progress-bar-uploading-artifacts;
  }

  .unknown {
    background: $progress-bar-unknown;
  }
}

.progress-bar-tooltip {
  font-size:     12px;
  visibility:    hidden;
  margin-top:    7px;
  margin-left:   -30px;
  width:         320px;
  text-align:    center;
  padding:       10px;
  border-radius: 6px;
  position:      absolute;
  z-index:       map_get($zindex, tooltip);
  background:    rgb(243, 243, 243, 0.95); //sass-lint:disable-line no-color-literals
  border:        1px solid $tooltip-border-color;

  :before {
    content:       '';
    display:       block;
    width:         0;
    height:        0;
    position:      absolute;

    border-top:    8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:  8px solid $tooltip-border-color;

    left:          140px;
    top:           -12px;
    transform:     rotate(90deg);
  }

  .state-transition-item {
    margin-bottom: 6px;
  }

  .tooltip-item {
    margin: 3px 0 3px 0;
  }

  .tooltip-key-value-pair {
    display:     flex;
    line-height: 23px;

    .in-progress {
      @include icon-after($type: $fa-var-spinner);

      &:after {
        animation:   spin 1500ms linear infinite;
        margin-left: 2px;
        font-size:   15px;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }

    .completed {
      @include icon-after($type: $fa-var-check, $color: $white);

      &:after {
        position:   absolute;
        left:       8px;
        margin-top: 4px;
      }
    }

    .transition-circle {
      background:    $progress-bar-waiting;
      height:        18px;
      width:         18px;
      border-radius: 10px;
      margin-right:  10px;
      margin-top:    3px;
    }

    .waiting, .scheduled {
      background: $progress-bar-waiting;
    }

    .preparing {
      background: $progress-bar-preparing;
    }

    .building {
      background: $progress-bar-building;
    }

    .uploadingartifacts, .completing {
      background: $progress-bar-uploading-artifacts;
    }
  }

  .transition-line {
    height:      11px;
    width:       3px;
    margin:      -8px 0 -4px 8px;
    border-left: 2px solid $border-color;
  }

  .tooltip-key {
    font-weight:  700;
    margin-right: 7px;
  }

  .transition-item-tooltip-key {
    min-width:     150px;
    align-content: flex-start;
    display:       flex;
  }
}

.unknown-property {
  font-style: italic;
}

// job count and rerun container

.job-count-and-rerun-container {
  display: flex;
  margin:  15px 0 15px 0;
}

.job-rerun-container {
  margin-left:  15px;
  margin-right: 275px;
}

.job-count-container {
  display: flex;

  .count-container:nth-child(1) {
    margin-left: 15px;
  }
}

.count-container {
  display:      flex;
  margin-right: 15px;
  margin-top:   2px;
  width:        90px;
}

.count-label {
  font-size:   14px;
  margin-left: 5px;
}

.count-text {
  margin-left: 5px;
  font-weight: 600;
  font-size:   15px;
}

.tooltip-message {
  display:       block;
  position:      absolute;
  width:         180px;
  margin-left:   -73px;
  color:         $white;
  background:    $tooltip-message-background;
  font-size:     12px;
  padding:       10px;
  border-radius: 3px;
  margin-top:    2px;

  &:before {
    content:       '';
    display:       block;
    width:         0;
    height:        0;
    position:      absolute;

    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:  10px solid $tooltip-message-background;

    left:          80px;
    top:           -13px;
    transform:     rotate(90deg);
  }
}

.hidden {
  display: none;
}

.unsorted {
  @include icon-before($fa-var-sort);
  color:       $gray;
  margin-left: 2px;
}

.asc {
  @include icon-before($fa-var-sort-asc);
  color:       $dark-gray;
  margin-left: 2px;
}

.desc {
  @include icon-before($fa-var-sort-desc);
  color:       $dark-gray;
  margin-left: 2px;
}
